<template>
  <view class="read-history">
    <view class="book-item" v-for="(item, i) in bookList" :key="i">
      <view class="book-image">
        <image class="img" :src="item.cover" mode="aspectFit"></image>
      </view>
      <view class="book-info">
        <view class="book-name uni-ellipsis">{{item.name}}</view>
        <view class="book-introduction uni-multiline-over-hidden">{{item.introduction}}</view>
        <view class="book-time uni-ellipsis">上次阅读时间：{{item.time}}</view>
      </view>
      <view class="operation" @click="toBookInfo(item)">
        <uni-icons class="icon-eye" type="eye" size="24"></uni-icons>
        <text class="title">续看</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'readHistory',
  onShow: ()=>{

  },
  onReachBottom: ()=>{
    console.log('onReachBottom')
  },
  data() {
    return {
      bookList: [
        {name: '想都别想', cover: '../../../static/test/manhua.png', introduction: '生活，是一地鸡毛，梦想不抵一顿饱饭', time: '2020-10-03', tags: []},
        {name: '做梦吧你', cover: '../../../static/test/manhua.png', introduction: '生活，是一地鸡毛，梦想不抵一顿饱饭', time: '2020-10-03', tags: []},
        {name: '就算是阿Q精神，也要有追求美好生活的勇气', cover: '../../../static/test/manhua.png', introduction: '生活，是一地鸡毛，梦想不抵一顿饱饭', time: '2020-10-04', tags: []},
        {name: '活与生活', cover: '../../../static/test/manhua.png', introduction: '活着，很容易，生活，却非常不容易，你没有持之以恒的毅力与不懈的努力，那么，你的生活将是一地鸡毛，梦想不抵一顿饱饭', time: '2020-10-04', tags: []},
        {name: '活与生活', cover: '../../../static/test/manhua.png', introduction: '活着，很容易，生活，却非常不容易，你没有持之以恒的毅力与不懈的努力，那么，你的生活将是一地鸡毛，梦想不抵一顿饱饭', time: '2020-10-04', tags: []},
        {name: '活与生活', cover: '../../../static/test/manhua.png', introduction: '活着，很容易，生活，却非常不容易，你没有持之以恒的毅力与不懈的努力，那么，你的生活将是一地鸡毛，梦想不抵一顿饱饭', time: '2020-10-04', tags: []},
      ],
    }
  },
  methods: {
    toBookInfo(item){
      console.log(item)
    }
  }
}
</script>

<style lang="scss" scoped>
.read-history {
  .book-item {
    /* #ifdef H5 */
    width: 100%;
    /* #endif */
    width: 750rpx;
    height: 300rpx;
    padding: 0 14rpx;
    box-shadow: 0 0 5rpx #ccc;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .book-image {
      width: 25%;
      height: 100%;
      .img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    .book-info {
      width: 375rpx;
      height: 300rpx;
      padding: 0 20rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      .book-name {
        width: 100%;
        height: 25%;
        height: 75rpx;
        line-height: 75rpx;
        font-weight: bolder;
      }
      .book-introduction {
        width: 100%;
        height: 40%;
        padding: 10rpx;
        font-size: 25rpx;
      }
      .book-time {
        width: 100%;
        height: 25%;
        height: 75rpx;
        line-height: 75rpx;
        font-size: 16rpx;
      }
    }
    .operation{
      width: 25%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
  }
}
.uni-multiline-over-hidden {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
</style>